<template>
    <div>
      <div class="pt10"></div>
      <div style="overflow:hidden;">
        <div class="leftTable">
          <div :class="buttonsChild.buttons.length > 1 ? 'mt38': ''"></div>
          <el-tree
              :data="treeData"
              show-checkbox
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              @node-click="nodeClickHandle"
              highlight-current
              check-on-click-node
              >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <span class="iconfont" @click="() => append(data)">&#xe605;</span>
                  <span class="iconfont" @click="() => remove(node, data)">&#xe603;</span>
                </span>
              
            </span>
          </el-tree>
        <!-- <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
                <span class="iconfont" @click="() => append(data)">&#xe605;</span>
                <span class="iconfont" @click="() => remove(node, data)">&#xe603;</span>
            </span>
          </span>
        </el-tree> -->
        <!-- :default-checked-keys="[5]" 
             check-on-click-node-->
        </div>
        <div class="rightTable">
          <button-render :buttonsData="buttonsChild" @formCommHandler="formCommHandler"></button-render>
          <edit-table v-bind="childTableParams" ref="childTable">
            <template #table_before>
              <slot name="childTable_before_son"></slot>
            </template>
            <template #table_after>
              <slot name="childTable_after_son"></slot>
            </template>
          </edit-table>
        </div>
      </div>
      <ele-dialog :dialogData='dialogData' @formCommHandler='formCommHandler' style="height:400px;"></ele-dialog>
    </div>
</template>
<script>
import EditTable from "@/components/baseComponents/EditTable";
import ButtonRender from "@/components/baseComponents/ButtonRender";
import EleDialog from '@/components/baseComponents/Dialog'
let id = 1000;
export default {
  name: "parentchildtreeTemplate",
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    buttonsChild: {
      type: Object,
      default: () => {}
    },
    childTableParams: {
      type: Object,
      default: () =>{}
    },
    dialogData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tableData: [],
      editDeptData: null
    };
  },
  methods: {
    append(data) {
        this.dialogData.dialogVisible = true
        this.editDeptData = data
    },

    remove(node, data) {
      this.$emit('treeNodeDelHandler',data)
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    formCommHandler(data) {
        let _this = this
        if(data.type == "childAdd"){ //新增
            let obj = JSON.parse(JSON.stringify(_this.childTableParams.rowDataJson));
            if(obj){
                _this.$refs.childTable.addRow(obj);
            }
        }
        
        if(data.type == "childSave"){ //保存
            _this.$emit('childSaveHandler',_this.$refs.childTable.saveData)
        }
        
        if(data.type == "childDel"){ //删除  如果特别情况删除前存在异步操作这里需要优化
            _this.$emit('childDelHandler$before',_this.$refs.childTable.saveData)
            _this.$refs.childTable.deleteRow()
            _this.$emit('childDelHandler$after',_this.$refs.childTable.saveData)
        }

        if(data.type == "submit") { //表单提交  //
            let _data = this.editDeptData
            const json = this.dialogData.formData.queryData
            let newChild = JSON.parse(JSON.stringify(json))
            //字段代完善
            newChild['label'] = json.deptName;
            if (!_data.children) {
              this.$set(_data, 'children', []);
            }
            _data.children.push(newChild);
            this.dialogData.dialogVisible = false
        }
        if(data.type == "cancel") { //表单取消
            // console.log('取消成功')
            this.dialogData.dialogVisible = false
        }
    },
    nodeClickHandle(data, node) {
      // console.log(data)
      // console.log(node)
      if(node.isLeaf && node.checked){
        this.$refs['childTable'].query(data);
      }
    }
  },
  created() {

  },

  components:{
      ButtonRender,
      EditTable,
      EleDialog
  }
};
</script>
<style scoped>
@import '../assets/iconfont/iconfont.css';
.leftTable {
  float: left;
  width: 49%;
}
.rightTable {
  float: right;
  width: 49%;
}
.mt {
  height: 28px;
}
.pt10 {
  padding-top: 10px;
}
</style>


